import { Divider, Flex, Tag, Typography } from "antd";
import styles from "./TSKrNewsFlashesCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
const { Text, Link } = Typography;

export function TSKrNewsFlashesCard({ item = {}, style = {} }) {
  const { openInNewWindow } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  return (
    <>
      <Flex
        vertical
        style={{
          backgroundColor: "white",
          boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px",
          padding: 12,
          ...style,
        }}>
        {/* 时间标签和标题 */}
        <Flex align="center" gap={8} style={{ marginBottom: 8 }}>
          <Tag color="#E8F3FF" style={{ color: "#165DFF", margin: 0 }}>
            {item.extra_content.created_at}
          </Tag>
          <Link
            href={item.url}
            target={target}
            className={styles["content-link"]}
            style={{
              fontSize: 15,
              fontWeight: 500,
              lineHeight: 1.4,
              flex: 1,
              color: "rgba(0, 0, 0, 0.88) ",
            }}
            ellipsis>
            {item.title}
          </Link>
        </Flex>

        {/* 内容简介和原始链接 */}
        <Flex justify="space-between" align="flex-end">
          <Text
            type="secondary"
            style={{
              marginRight: 12,
              fontSize: 13,
              flex: 1,
            }}>
            {item.extra_content.intro}
          </Text>

          {item.extra_content.origin_link && (
            <Link
              href={item.extra_content.origin_link}
              target={target}
              type="secondary"
              style={{
                fontSize: 12,
                whiteSpace: "nowrap",
              }}>
              查看原文
            </Link>
          )}
        </Flex>
      </Flex>
      <Divider style={{ margin: "0" }} />
    </>
  );
}
